<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">世界地图</div>
      <div class="sub_title">世界分级统计地图</div>
      <slot name="title"></slot>
    </div>
    <div id="map_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { name: "Russia", value: 86.8 },
        { name: "China", value: 106.3 },
        { name: "Japan", value: 94.7 },
        { name: "Mongolia", value: 98 },
        { name: "Canada", value: 98.4 },
        { name: "United Kingdom", value: 97.2 },
        { name: "United States of America", value: 98.3 },
        { name: "Brazil", value: 96.7 },
        { name: "Argentina", value: 95.8 },
        { name: "Algeria", value: 101.3 },
        { name: "France", value: 94.8 },
        { name: "Germany", value: 96.6 },
        { name: "Ukraine", value: 86.3 },
        { name: "Egypt", value: 102.1 },
        { name: "South Africa", value: 101.3 },
        { name: "India", value: 107.6 },
        { name: "Australia", value: 99.9 },
        { name: "Saudi Arabia", value: 130.1 },
        { name: "Afghanistan", value: 106.5 },
        { name: "Kazakhstan", value: 93.4 },
        { name: "Indonesia", value: 101.4 },
      ],
    };
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "map_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 600,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
      // 设置默认交互
      defaultInteractions:['tooltip','legend-highlight', 'legend-filter','element-active', 'continuous-filter', 'ellipsis-text']
    });
    // 自定义提示框
    this.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      domStyles:{
        "g2-tooltip-list-item":{
          textAlign:'left'
        }
      }
    });
    // 同步度量
    this.chart.scale({
      longitude: {
        sync: true
      },
      latitude: {
        sync: true
      }
    });
    // 不展示坐标系
    this.chart.axis(false);
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json")
      .then((res) => res.json())
      .then((mapData) => {
        // 将 GeoJSON 数据转换成 G2 可绘制的的数据格式
        const mapDv = new DataView().source(mapData, {
          type: "GeoJSON",
        });
        // 创建地图 View
        const worldMapView = this.chart.createView();
        console.log(mapDv.rows)
        worldMapView.data(mapDv.rows);
        worldMapView.tooltip(false);
        worldMapView
          .polygon()
          .position("longitude*latitude")
          .style({
            fill: "#fff",
            stroke: "#ccc",
            lineWidth: 1,
          });
        // 创建数据覆盖 View 层
        const userDv = new DataView().source(this.dataList);
        // 根据 dataList 里面的 name 字段找到对应的数据，并添加 trend 字段
        userDv
          .transform({
            geoDataView: mapDv,
            field: "name",
            type: "geo.region",
            as: ["longitude", "latitude"],
          })
          .transform({
            type: "map",
            callback(obj) {
              obj.trend = obj.value > 100 ? "男性更多" : "女性更多";
              return obj;
            },
          });
        console.log(userDv.rows);

        const userView = this.chart.createView();
        userView.data(userDv.rows);
        userView.scale({
          trend: {
            alias: "每100位女性对应的男性数量",
          },
          name: {
            alias: "国家",
          },
        });
        userView.polygon()
          .position('longitude*latitude')
          .color('trend', ['#F51D27', '#0A61D7'])
          .tooltip('name*trend')
          .style({
            fillOpacity: 0.85
          })
        this.chart.render();
      });
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>
